<template>
  <el-dialog :title="`${form.accidentId ? '修改' : '添加'}项目事故`" :visible.sync="show" :close-on-click-modal="false" :show-close="!btnLoading" width="600px" @closed="$refs.form.resetFields()">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item prop="accidentId" class="hide" />
      <el-form-item prop="projectName" class="hide" />
      <el-form-item label="所属项目" prop="projectId">
        <span v-if="form.accidentId">{{ form.projectName }}</span>
        <el-select v-model="form.projectId" placeholder="请选择项目" default-first-option filterable :loading="projectsLoading" style="width: 100%" v-else>
          <el-option v-for="(item, index) in projects" :key="index" :label="item.cflastname" :value="item.fid" />
        </el-select>
      </el-form-item>
      <el-form-item label="事故标题" prop="accidentTitle"><el-input v-model.trim="form.accidentTitle" placeholder="请输入事故标题" :maxlength="255" /></el-form-item>
      <el-form-item label="事故内容描述" prop="accidentContent"><el-input v-model="form.accidentContent" type="textarea" :rows="3" placeholder="请输入事故内容描述" :maxlength="3000" /></el-form-item>
      <el-form-item label="事故等级" prop="level">
        <el-select v-model="form.level" placeholder="请选择" default-first-option style="width: 100%">
          <el-option v-for="dict in proAccidentLevels" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生日期" prop="occurDate">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.occurDate" value-format="yyyy-MM-dd" style="width: 100%" />
      </el-form-item>
      <el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :maxlength="255" /></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 添加或修改项目事故
import { nameRule } from '@/utils/validate'
import { proAccidentLevels } from '@/utils/baseData'
import { editFormMixin } from '@/utils/mixin'
import { getAuthCurProject } from '@/api/common'
import { addProAccident, updateProAccident } from '@/api/qualityManage/cq'
export default {
  mixins: [editFormMixin],
  data() {
    return {
      proAccidentLevels,
      primaryKey: 'accidentId',
      addApi: addProAccident,
      updateApi: updateProAccident,
      form: {
        accidentId: '',
        projectId: '',
        projectName: '',
        accidentTitle: '',
        accidentContent: '',
        level: 'GENERAL',
        occurDate: '',
        remark: ''
      },
      rules: {
        projectId: [{ required: true, message: '请选择所属项目' }],
        accidentTitle: [{ required: true, message: '请输入事故标题' }, nameRule],
        accidentContent: [{ required: true, message: '请输入事故内容描述' }],
        level: [{ required: true, message: '请选择事故等级' }],
        occurDate: [{ required: true, message: '请选择日期' }]
      },
      projects: [],
      projectsLoading: false
    }
  },
  methods: {
    opened() {
      this.getProjects()
    },
    async getProjects() {
      if (this.projects.length) return
      this.projectsLoading = true
      const res = await getAuthCurProject().catch(() => false)
      this.projectsLoading = false
      if (res === false) return
      this.projects = res.data
    }
  }
}
</script>
